import {Button, Card, message, Pagination, Popconfirm, Table, Tag} from "antd";
import {Link} from "react-router-dom";
import React, {useEffect, useState} from "react";

import './MemberTag.less'
import http from "../../utils/http";
import TagModal from "../../components/User/tagModal/TagModal";
const MemberTag = () => {
    const [recordData,setRecordData] = useState({});
    const [isShow,setIsShow] = useState(false);
    const [tableData,setTableData] = useState([]);
    const [page,setPage] = useState(1);
    const [pageSize,setPageSize] = useState(5);
    const [total,setTotal] = useState(0);

    useEffect(()=>{
        getTableData();
    },[]);

    const columns = [
        { title: '#', dataIndex: 'id', key: '1',align:'center'},
        { title: '标签名称', dataIndex: 'name', key: '2',align:'center' },
        { title: '概述', dataIndex: 'overview', key: '3',align:'center'},
        { title: '创建时间', dataIndex: 'createTime', key: '4',align:'center'},
        {
            title: '权益',
            dataIndex: 'discount',
            key:'5',
            align:'center',
            render:(text,record)=>{
                return (<span>{record.discount == 1 ? '无' : record.discount * 10 + '折'}</span>)
            }
        },
        {
            title: '会员数',
            dataIndex: 'num',
            key: '6',
            align:'center',
            render:(text,record)=>{
                return <span style={{color:'#186eff'}}>{record.num}</span>
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: '7',
            align:'center',
            render:(text,record)=> {
                if(record.status) return (<Tag color="green">{'启用'}</Tag>)
                else return (<Tag color="#ff3131">{'禁用'}</Tag>)
            }
        },
        {
            title: '操作',
            key: 'operation',
            align:'center',
            render: (text,record) => (
                <div>
                    <Button type={'link'} onClick={openEditModal.bind(this,record)}>编辑</Button>
                    <Popconfirm
                        title="确定删除吗？"
                        onConfirm={deleteData.bind(this,record.id)}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button type={'link'} style={{color:'red'}}>删除</Button>
                    </Popconfirm>
                </div>
            )
        },
    ];

    const getTableData = () => {
        http({
            url:'api/user/findLabels',
            method:'post',
            params:{
                page:page,
                num:pageSize
            }
        }).then(res=>{
            if (res.code == 200){
                setTableData(res.info.list);
                setTotal(res.info.total);
            }
            console.log(res);
        })
    }

    const openEditModal = (record) => {
        setRecordData(record);
        setIsShow(true);
    }
    const closeEditModal = () => {
        setIsShow(false);
    }
    const deleteData = (id) => {
        http({
            url:'api/user/deleteLabel',
            method:'post',
            params:{lid:id}
        }).then(res=>{
            if (res.code == 200){
                message.success(res.msg);
                getTableData();
            }else {
                message.error(res.msg);
            }
        })
    }
    const onChangePage = (ev) => {
        console.log(ev);
        setPage(parseInt(ev));
    }
    return(
        <div className='Mbt-bigBox'>
            <Card className='Mbt-Card'>
                <div className={'member-card'}>
                    <div style={{width:'100%'}}>
                        <div className='btn-Link' >
                            <Link to="/home/CreateMemberTag/CreateMemberTag"><Button type={'primary'}>创建标签</Button></Link>
                        </div>
                        <div className='Mbt-table'>
                            <Table columns={columns} dataSource={tableData}  pagination={false} />
                        </div>
                    </div>
                    <div>
                        <Pagination hideOnSinglePage current={page} defaultPageSize={pageSize} onChange={onChangePage} total={total} />
                    </div>
                </div>
                <TagModal isShow={isShow} close={closeEditModal} data={recordData}/>
            </Card>
        </div>
    )
}
export default MemberTag